<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">主页</router-link> |
      <router-link to="/about">关于</router-link> | 
      <router-link to="/product">商品</router-link>
    </div>
    <div id='tx1' class='tx'></div>
    <div id='tx2' class='tx'></div>
    <div class="monitor">
    <router-view/>
    </div> -->
    <el-container>
      <el-header>
        <el-menu router
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="/">主页</el-menu-item>
          <el-menu-item index="/product">产品</el-menu-item>
          <el-menu-item index="/about">关于</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-container>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return {
      activeIndex:'/'
    }
  },
  methods:{
    handleSelect(){}
  }
}
</script>

<style>
.tx {
  background: silver;
  width: 10px;
  height: 200px;
  float: left;
}

#tx1 {
  margin-left: 20%;
  transform: rotate(30deg);
}

#tx2 {
  transform: rotate(-30deg);
}
.monitor {
  width: 700px;
  height: 400px;
  margin: 0 auto;
  border: 30px solid black;
  border-radius: 5%;
  background: white;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
